<!--
  Copyright 2013-2019 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<div class="gt-header clearfix">
  <div class="gt-header-lhs float-left">
    <h1 class="gt-header-text"
        ng-if="!layout.central">
      {{headerDisplay}}
    </h1>
    <!-- ng-show needed here instead of ng-if because transaction.js binds directly to #topLevelAgentRollupDropdown -->
    <div ng-show="layout.central">
      <select gt-selectpicker
              gt-title="agentRollup.topLevelDisplay || '&amp;lt;select&amp;gt;'"
              data-width="fit"
              data-live-search="true"
              data-style="btn-secondary"
              id="topLevelAgentRollupDropdown"
              aria-label="Agent">
        <option ng-repeat="item in topLevelAgentRollups track by item.id"
                data-href="{{currentTabUrl()}}{{headerQueryString(item.id, transactionType)}}"
                data-tokens="{{item.display}}"
                value="{{item.id}}"
                ng-disabled="item.disabled"
                ng-selected="item.id == agentRollup.topLevelId">
          {{item.display}}
        </option>
        <option disabled
                class="gt-top-level-agent-rollup-dropdown-message d-none"
                style="font-style: italic; font-size: 1rem; cursor: inherit;"
                ng-if="topLevelAgentRollups.length === 0">
          No active agents in this time period
        </option>
        <!-- can't use gt-spinner due to selectpicker behavior -->
        <option disabled
                class="gt-top-level-agent-rollup-dropdown-spinner d-none"
                style="position: relative; height: 30px; cursor: inherit;">
        </option>
      </select>
      <!-- ng-show needed here instead of ng-if because transaction.js binds directly to #childAgentRollupDropdown -->
      <!-- also important, ng-show is not on select directly, so that it will apply right away to the selectpicker which
           is added as a sibling of select, instead of having to wait for selectpicker('refresh') which can cause a
           slight jitter -->
      <span ng-show="showChildAgentRollupDropdown()">
        <select gt-selectpicker
                gt-title="agentRollup.childDisplay"
                data-width="fit"
                data-live-search="true"
                data-style="btn-secondary"
                id="childAgentRollupDropdown"
                aria-label="Child agent">
          <option data-href="{{currentTabUrl()}}{{headerQueryString(agentRollup.topLevelId, transactionType)}}"
                  data-tokens="Rollup"
                  value="{{agentRollup.topLevelId}}"
                  ng-selected="agentRollup.topLevelId == agentRollup.id">
            Rollup
          </option>
          <option data-divider="true">
          </option>
          <option ng-repeat="item in childAgentRollups track by item.id"
                  data-href="{{currentTabUrl()}}{{headerQueryString(item.id, transactionType)}}"
                  data-tokens="{{item.display}}"
                  value="{{item.id}}"
                  title="{{item.display}}"
                  ng-disabled="item.disabled"
                  ng-selected="item.id == agentRollup.id">
            {{item.indentedDisplay}}
          </option>
          <option disabled
                  class="gt-child-agent-rollup-dropdown-message d-none"
                  style="font-style: italic; font-size: 1rem; cursor: inherit;"
                  ng-if="childAgentRollups.length === 0">
            No active agents in this time period
          </option>
          <!-- can't use gt-spinner due to selectpicker behavior -->
          <option disabled
                  class="gt-child-agent-rollup-dropdown-spinner d-none"
                  style="position: relative; height: 30px; cursor: inherit;">
          </option>
        </select>
      </span>
    </div>
    <!-- don't use border to simulate vertical bar since this will jitter on reload (at least in Chrome)
         while chrome guesses the placement of the border based on default font and then it moves slightly
         once font is available -->
    <div class="gt-header-text gt-separator">
      |
    </div>
    <div class="gt-header-text"
         ng-if="hideTransactionTypeDropdown()">
      {{transactionType}}
    </div>
    <div ng-if="!hideTransactionTypeDropdown()">
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle"
                type="button"
                data-toggle="dropdown"
                style="padding-right: 1rem;"
                id="gtTransactionType">
          {{transactionType || '&lt;transaction type&gt;'}}
        </button>
        <div class="dropdown-menu"
             aria-labelledby="gtTransactionType">
          <a class="dropdown-item"
             ng-repeat="tt in agentRollup.transactionTypes"
             ng-if="tt !== transactionType"
             ng-href="{{currentTabUrl()}}{{headerQueryString(null, tt)}}">
            {{tt}}
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="gt-header-rhs float-right">
    <div ng-controller="ChartRangeCtrl" ng-include="'template/gt-chart-range.html'"></div>
  </div>
</div>
<div class="gt-transaction-sidebar">
  <div ui-view="sidebar"></div>
</div>
<div class="gt-transaction-main-column">
  <div class="card">
    <div class="card-header" style="word-break: break-all;">
      <h2>{{transactionName ? transactionName : 'All ' + transactionType + ' Transactions'}}</h2>
    </div>
    <div class="card-body">
      <div ui-view="tabs"></div>
      <div ui-view="main" ng-hide="hideMainContent()"></div>
    </div>
  </div>
</div>
